import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import './pSum.less';
import { Area } from '@antv/g2plot';
import { Empty, Progress, Table } from 'antd';
import { useEffect, useRef, useState } from 'react';
import { paddingZero } from '@/utils/tool';
import styles from './productionRank.module.less';
const idMap = {
    iron: 'total-iron',
    pack: 'total-pack',
    check: 'total-check'
};
const averageMap = {
    iron: 'average-iron',
    pack: 'average-pack',
    check: 'average-check'
};
export default (props) => {
    const { isFull, data, field } = props;
    const yieldTable = useRef();
    const timer = useRef();
    const [scrollY, setSCrollY] = useState(0);
    const [yieldColumns, setYieldColumns] = useState([]);
    const [yieldData, setYieldData] = useState([]);
    const [productionTotalNum, setProductionTotalNum] = useState(0);
    const [productionCapitalNum, setProductionCapitalNum] = useState(0);
    const [area1, setArea1] = useState();
    const [area2, setArea2] = useState();
    // 总产量趋势
    useEffect(() => {
        const area = new Area(`total-${field}`, {
            data: [],
            xField: 'x',
            yField: 'y',
            smooth: true,
            autoFit: true,
            areaStyle: {
                fill: 'l(270) 0:#000C6D 1:#0EC4DE'
            },
            line: {
                color: '#0EC4DE'
            },
            xAxis: {
                range: [0.02, 0.98],
                label: null,
                grid: null,
                line: null
            },
            yAxis: {
                range: [0.02, 0.98],
                label: null,
                grid: null
            }
        });
        area.render();
        setArea1(area);
    }, []);
    // 人均产量趋势
    useEffect(() => {
        const area = new Area(`average-${field}`, {
            data: [],
            xField: 'x',
            yField: 'y',
            smooth: true,
            autoFit: true,
            areaStyle: {
                fill: 'l(270) 0:#000C6D 1:#F7B500'
            },
            line: {
                color: '#F7B500'
            },
            xAxis: {
                range: [0.02, 0.98],
                label: null,
                grid: null,
                line: null
            },
            yAxis: {
                range: [0.02, 0.98],
                label: null,
                grid: null
            }
        });
        area.render();
        setArea2(area);
    }, []);
    useEffect(() => {
        if (data && data.productionTotal && data.productionTotal.length) {
            const { productionTotal } = data;
            setProductionTotalNum(productionTotal[productionTotal.length - 1].y);
            const newArray = [];
            for (let i = 1; i <= 24; i++) {
                let date;
                // {x: '1 3'}
                const current = productionTotal.find((item) => {
                    const a = item.x.split(' ');
                    date = a[0];
                    const time = a[1];
                    return i === Number(time);
                });
                if (current) {
                    newArray.push(current);
                }
                else {
                    newArray.push({ x: `${date}  ${paddingZero(i)}`, y: 0 });
                }
            }
            area1.update({
                data: newArray
            });
        }
    }, [area1, data]);
    useEffect(() => {
        if (data && data.productionCapital && data.productionCapital.length) {
            const { productionCapital } = data;
            setProductionCapitalNum(productionCapital[productionCapital.length - 1].y);
            const newArray = [];
            for (let i = 1; i <= 24; i++) {
                let date;
                const current = productionCapital.find((item) => {
                    const a = item.x.split(' ');
                    date = a[0];
                    const time = a[1];
                    return i === Number(time);
                });
                if (current) {
                    newArray.push(current);
                }
                else {
                    newArray.push({ x: `${date}  ${paddingZero(i)}`, y: 0 });
                }
            }
            console.log(newArray, 'newArray');
            area2.update({
                data: newArray
            });
        }
    }, [area2, data]);
    // 产量数据
    useEffect(() => {
        if (data && data.rankList && data.rankList.length) {
            const total = data.rankList.find((list) => list.ranking == 1) || {};
            const columns = [
                {
                    title: '排名',
                    dataIndex: 'ranking',
                    key: 'ranking',
                    align: 'center'
                },
                {
                    title: '产量',
                    dataIndex: 'production',
                    key: 'production',
                    align: 'center',
                    render: (value) => {
                        const percent = Math.floor((value / total.production) * 100);
                        const color = () => {
                            if (percent <= 25) {
                                return 'yellow';
                            }
                            if (percent <= 75 && percent > 25) {
                                return 'green';
                            }
                            if (percent <= 90 && percent >= 75) {
                                return 'blue';
                            }
                            if (percent < 100 && percent > 90) {
                                return '#44D7B6';
                            }
                            if (percent === 100) {
                                return 'red';
                            }
                            return 'black';
                        };
                        return (_jsxs("div", { style: { display: 'flex', alignItems: 'center' }, children: [_jsx(Progress, { strokeColor: color(), showInfo: false, percent: percent, trailColor: "#072C88" }), _jsx("span", { children: value })] }));
                    }
                },
                {
                    title: '员工编号',
                    dataIndex: 'workNo',
                    key: 'workNo',
                    align: 'center'
                },
                {
                    title: '员工姓名',
                    dataIndex: 'realName',
                    key: 'realName',
                    align: 'center'
                }
            ];
            setYieldColumns(columns);
            setYieldData([...data.rankList]);
        }
    }, [data]);
    // 产量表格滚动
    useEffect(() => {
        if (yieldTable && yieldTable.current && yieldData && yieldData.length) {
            const target = yieldTable.current.getElementsByClassName('ant-table-body');
            clearInterval(timer.current);
            const t = setInterval(() => {
                target[0].scrollTop += 1;
                if (++target[0].scrollTop >=
                    target[0].scrollHeight - target[0].clientHeight) {
                    target[0].scrollTop = 0;
                }
            }, 64);
            timer.current = t;
        }
    }, [yieldTable, yieldData, scrollY]);
    useEffect(() => {
        if (!yieldData || !yieldData.length)
            return;
        setTimeout(() => {
            const tableHeight = yieldTable.current.clientHeight;
            const headHeight = yieldTable.current.getElementsByClassName('ant-table-thead')?.[0]
                ?.clientHeight;
            setSCrollY(tableHeight - headHeight - 8);
        }, 200);
    }, [yieldTable, yieldData]);
    return (_jsxs("div", { className: styles.container, id: "pTable", children: [_jsx("header", { className: styles.rankHeader, children: "\u4EA7\u91CF\u6392\u540D" }), _jsxs("div", { className: styles.outBox, children: [_jsxs("div", { className: styles.areaBox, children: [_jsxs("div", { className: styles.area, children: [_jsx("div", { children: "\u603B\u4EA7\u91CF\u8D8B\u52BF" }), _jsx("div", { className: styles.totalCount, children: productionTotalNum }), _jsx("div", { id: idMap[field], className: styles.areaMapBox })] }), _jsxs("div", { className: styles.area, children: [_jsx("div", { children: "\u4EBA\u5747\u4EA7\u91CF\u8D8B\u52BF" }), _jsx("div", { className: styles.averageCount, children: productionCapitalNum }), _jsx("div", { id: averageMap[field], className: styles.areaMapBox })] })] }), yieldData && yieldData.length ? (_jsx(Table, { ref: yieldTable, className: styles.rankTable, pagination: false, rowKey: 'ranking', columns: yieldColumns, dataSource: yieldData, size: 'middle', scroll: {
                            y: scrollY
                        } })) : (_jsx(Empty, { image: Empty.PRESENTED_IMAGE_SIMPLE, style: { color: '#fff', height: '40%' }, className: styles.emptyImg }))] })] }));
};
